<template>
  <div class="radio-group">
    <template v-for="item of radioList">
      <span :key="item[keyName]" class="normal-radio" :class="activeCode===item[codeKey]?'active-radio': ''" @click="radioChange(item)">{{ item[labelKey] }}</span>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeCode: this.radioValue
    }
  },
  props: {
    keyName: {
      type: String,
      default: () => 'code'
    },
    codeKey: {
      type: String,
      default: () => 'code'
    },
    labelKey: {
      type: String,
      default: () => 'label'
    },
    radioValue: {
      type: String,
      default: () => ''
    },
    radioList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    radioValue() {
      this.activeCode = this.radioValue
    }
  },
  methods: {
    radioChange(item) {
      this.activeCode = item[this.codeKey]
      this.$emit('radioChange', item)
    }
  }
}
</script>
<style scoped lang="scss">
.radio-group {
  .normal-radio{
    display: inline-block;
    font-size: 14px;
    padding: 3px 10px;
    margin-right: 5px;
    border-radius: 14px;
    cursor: pointer;
    line-height: 20px;
  }
  .active-radio{
    background: #E0E8FF;
    color: #72A8FE;
    font-weight: 600;
  }
}
</style>
